﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SinalR 测试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script src="~/js/signalr.js"></script>

</head>
<body>
    <h1>SinalR 测试</h1>
    <div>
        <ul id="messagesList" style="height:300px"></ul>
    </div>
    <div>
        <input type="text" id="userName" placeholder="用户名" />
        <input type="text" id="time" placeholder="时间" />
        <input type="text" id="message" placeholder="消息" />
        <button type="button" id="sendBtn">发送</button>
    </div>

    <script>
        var connection = new signalR.HubConnectionBuilder()
            .withUrl("/myHub")
            .configureLogging(signalR.LogLevel.Information)
            .build();
        connection.start().catch(err => console.error(err.toString()));

        connection.on("SendMessage", (user, time, message) => {
            var encodedMsg = user + "  said  " + message + " at " + time;
            var li = document.createElement("li");
            li.textContent = encodedMsg;
            document.getElementById("messagesList").appendChild(li);
            document.getElementById('message').value = null;
        });

        connection.on("someFunc", function (arg1) {
            console.log("someFunc:");
            console.log(arg1);
        });


        document.getElementById("sendBtn").addEventListener("click", function () {
            var user = document.getElementById('userName').value;
            var time = document.getElementById('time').value;
            var message = document.getElementById('message').value;
            connection.invoke("SendMessage", user, time, message).catch(err => console.error(err.toString()));
        });

    </script>
</body>
</html>